<template>
  <div class="processCenterheader row">
    <div class="processCenterHead">
      <span>{{ processCenterHeadText }}</span><span>{{ processCenterSubText }}</span>
    </div>
    <com-departmentstatistical filiter-url='care/site/getdept'></com-departmentstatistical>
    <com-timestatistical></com-timestatistical>
  </div>
   <com-totle-view data-url='care/site/deparment/flow/dashboard'></com-totle-view>
    <Com-rank rankurl="care/site/deparment/flow/processefficiency" :title="title" firchartsurl="care/site/deparment/flow/processtime" lastchartsurl="care/site/deparment/flow/deptprocessflow"></Com-rank>
</template>

<script>
import ComDepartmentstatistical from '../../components/departmentstatistical.vue';
import ComTimestatistical from '../../components/timestatistical.vue';
import ComTotleView from '../../components/totleView.vue';
import ComRank from '../../components/rank.vue';
import { changeKind } from '../../vuex/action'
export default {
  created() {
    
  },
  data () {
    return {
      processCenterHeadText: '流程中心',
      processCenterSubText:'Process Center',
      title:[{"name":"流程名称"},{"name":"所属业务"},{"name":"耗时"}]
    }
  },
  components: {
    ComDepartmentstatistical,
    ComTimestatistical,
    ComTotleView,
    ComRank
  },
  ready(){
  },
  vuex: {
    getters: {
      kind(state) {
        return state.kind
      }
    }
  },
  watch:{
    'kind':function(val) {
      if (val != "all") {
        var data = [{"name":"流程名称"},{"name":"耗时"}];
      }else{
        var data = [{"name":"流程名称"},{"name":"所属业务"},{"name":"耗时"}];
      }
      this.title = data;
    }
  }
}
</script>

<style scoped>
div.processCenterHead {
    font-size: 18px;
    padding: 16px 0;
}
div.processCenterHead span {
  color: #767E85; 
  letter-spacing: 5px;
}
div.processCenterHead span:last-child{
  font-size: 12px;
  letter-spacing: normal;
}
.row{
  margin-right: 0;
  margin-left: 0;
}
</style>
